<template>
  <div>
    <h1 class="title" >千峰管理系统</h1>
    <el-form-item label="用户名" prop="username">
      <el-input
        class="input"
        type="text"
        v-model="loginFrom.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        class="input"
        type="password"
        v-model="loginFrom.password"
        autocomplete="off"
      ></el-input>
     
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
      <el-input
        maxlength="5"
        v-model.number="loginFrom.captcha"
        type="text"
        @keydown.native.enter="submitForm('loginFrom')"
        class="captcha"
        ref="captcha"
       
      ></el-input>
      <span class="captcha-svg"  v-loading="loading">
        <i v-html="captcha" @click="getCaptcha" class="cap"></i>
      </span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('loginFrom')" class="login"
        >登录</el-button
      >
    </el-form-item>
    <!-- 手机登入图标按钮 -->
    <el-form-item>
      <div class="sms">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iphone"></use>
        </svg>
        <a
          href="javascript:;"
          @click="$emit('changeSmsType')"
          style="color: #fff; font-size: 16px"
          >切换短信登录</a
        >
      </div>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "@/api/users";

//表单验证的实现思路，当前组件的loginFrom变化，同步到父组件LoginFrom就行
export default {
  mounted() {
    // api.getCaptchaApi()
    //    .then(res=>{
    //      console.log(res)
    //    })
  },
  created() {
    this.getCaptcha();
  },

  // props:['loginFrom']
  data() {
    return {
      isSmsLogin: true, //控制是否切换短信登录
      captcha: "", //验证码
      loading:false,
      loginFrom: {
        username: "",
        password: "",
        captcha: "",
      },
    };
  },
  //通过watch监听LoginFrom的变化
  watch: {
    loginFrom: {
      handler(newVal) {
        // console.log(newVal)
        this.$emit("synLoginFrom", newVal);
      },
      deep: true,
    },
  },
  methods: {
    submitForm(formName) {
      // console.log(formName);
      // console.log(this.$refs)
      this.$emit("submits");
    },
    //封装一个获取验证码的方法
    getCaptcha() {
      // 打开加载动画
      this.loading= true
      api.getCaptchaApi().then((res) => {
        this.captcha = res.data.img;
        //关闭加载动画
        this.loading = false
      });
    },
  },
};
</script>
<style lang="less" scoped>
/* //修改element-ui的样式
        //1.打开调试器，找准类名，覆盖样式
        //2.看权重，使用!important
        //3.使用深度选择器>>>  /deep/  */
//密码的
.input {
  width: 250px;
  height: 44px;
  /deep/ .el-input__inner{
    height: 44px;
  }
}

.el-button--primary {
  width: 250px;
  height: 40px;
}
/deep/.el-form-item__label {
  color: #fff;
}
.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 50px;
}
//验证码的
.captcha {
  width: 125px;
  height: 44px;
  border: 0;
  /deep/.el-input__inner {
    border-radius: 0;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 44px;
    border: 0;
    //
  }
}

.captcha-svg {

  display: inline-block;
  width: 125px;
  height: 44px;
  color: #888;
  background-color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  vertical-align: middle;
  margin-bottom: 1.3px;
  overflow: hidden;
    /deep/ .cap {
      display: flex;
      position: absolute;
      width: 125px;
      height: 44px;
     
    }
  
}
.title{
  font-size: 30px;
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}
</style>
